<template id="helpHand">
    <div class="pa-active-module">
        <div class="pa-active-content">
            <div class="pa-title-wrap">
                <!--<img class="pa-title-img" v-lazy="staticImageUrl('images/pump_item_header.png')" alt="" />-->
                <img class="pas1-title-img width-full" v-if="pageObjDefault.headerImg" v-lazy="staticImageUrl(pageObjDefault.headerImg)" alt=""/>
                <img class="pas1-title-img width-full" v-else v-lazy="staticImageUrl('images/pump_item_header.png')" alt=""/>
                <span class="pa-title">好友助力榜</span>
            </div>
            <!--<div class="wempty-list" v-if="members == null || members.length==0">-->
                <!--<img class="empty-list-img" v-lazy="staticImageUrl('images/auction_passfailt.png')"/>-->
                <!--<p class="empty-list-text">还没有好友助力吆~<span class="go-invite"  @click="shareFn">邀请好友</span></p>-->
            <!--</div>-->
            <!--没有活动排行的时候-->
            <div class="wempty-list" v-if="pageObjDefault.orders.length == 0">
                <div>
                    <img class="pas1-title-img" v-if="pageObjDefault.noRankimgImg" v-lazy="staticImageUrl(pageObjDefault.noRankimgImg)" alt=""/>
                    <img class="empty-list-img" v-else v-lazy="staticImageUrl('images/auction_passfailt.png')" alt=""/>
                    <p class="empty-list-text">{{pageObjDefault.noRankimgText}}</p>
                </div>
            </div>
            <ul class="pa-list" v-else>
                <li class="pa-item" v-for="(member,key) in pageObjDefault.orders" v-if="!member.loginUser && key < 3" :key="key">
                    <div class="pa-el-row">
                        <div class="pa-list-left">
                            <div class="pa-grid-content pa-bg-purple pa-user-msg">
                                <img v-if="member.photo" class="pa-userheader" :src="member.photo" alt="" />
                                <span class='pa-username'>{{member.name | nameFilter}}</span>
                            </div>
                        </div>
                        <div class="pa-list-right">
                            <div class="pa-grid-content pa-bg-purple-light pa-user-msg">
                                成功打call￥{{member.cutMoney}}
                            </div>
                        </div>
                    </div>
                </li>
                <li class="pa-more" v-show="showAll" @click="showMore()">
                    全部展开<span class='iconfont icon-youjiantou1'></span>
                </li>
            </ul>
        </div>
        <!-- 好友助力全部列表 -->
        <friend-ranking-alert  v-if="friendAlert"
                               v-on:close-friend-alert="friendAlert = false"
                               v-on:nextPage="$emit('queryHelpers')"
                               v-bind:helpHandAlertHasMore="helpHandAlertHasMore"
                               v-bind:newMembers="newMembers">
        </friend-ranking-alert>
        <!--分享提示-->
        <img v-if="share" class="share-others-img width-full" :src="staticImageUrl('images/discount_share.png')" alt="" />
        <div v-if="share" class="back-bord"  v-on:click="share = false"></div>
    </div>
</template>
<script>

    import  xurl from '../../../../../x/xurl'

    export default {
        name: 'helpHand',
        props: {
            'actInfo':{
                type:Object
            },
            helpHandPageObj:{
                type:Object,
            },
            myInfo:{
                type:Object
            },
            newMembers:{
                type:Array
            },
            helpHandAlertHasMore:{
                type:Boolean
            }
        },
        data() {
            return {
                curPage: 0,//页面
                totalPage: 0,//总页
                members: [],
                share: false,
                showAll: false, // 全部显示
                friendAlert: false,
                pageObjDefault:{
                    headerImg:'',
                    noRankimgImg:'',
                    noRankimgText:'暂无排名',
                    orders:[],//{judgeMeExistRankList:false//是否为自己,ownerName:''//用户名，finishTime:购买完成时间}
                    newMembers:[],
                    rankingMessage:[],
                    orderId:0,
                    actId:0,
                },
                defaultMyInfo: {},//{isBuyed:false//自己是否买过,icon:''//头像,name:''//名字}
                defaultActInfo: {},
                rankingShow: false,
                openAllShow: false,
            }
        },
        mounted: function () {
            this.pageObjDefault = Object.assign(this.pageObjDefault,this.helpHandPageObj);
            if(this.pageObjDefault.orders.length >=3){
                this.showAll = true;
            }else{
                this.showAll = false;
            }
        },
        filters: {
            nameFilter: function (name) {
                var showName = "";
                if (name != null && name != "") {
                    showName = (name.length <= 2) ? name : name.substr(0, 2).concat("**");
                }
                return showName
            },
            timeFilter: function (time) {
                return new Date(time).Format("yyyy-MM-dd hh:mm");
            }
        },
        methods: {
            nextPage: function () {
                var actId = this.actInfo.actId;
                var pageNum = this.curPage + 1;
            },

            shareFn: function(){
                var _this = this;
                _this.share=true;
            },
            showMore: function(){
                var _this = this;
                _this.friendAlert = true;
                // $('body,html').addClass('ovfHiden');
            }
        },
        components:{
            'friend-ranking-alert':()=>import('./alert/HelpHandAlerts')
        }
    }

</script>
<style scoped lang="scss">
    @import url($css_root + 'css/components/activeModule.css');
</style>
